<template>
	<block>
		<view class="page_box">
			<view class="carousel-section">
				<!-- #ifdef APP-PLUS -->
				<view class="topPlace"></view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="place" style="width: 100%;height: 80rpx;"></view>
				<!-- #endif -->
			</view>
			<view class="content_box">
				<view class="x-f wrapper-box">
					<scroll-view class="left y-f" scroll-y>
						<view v-for="(item, index) in categorys" :key="index" class="type-list x-c" :class="[{ 'list-active': current == index }]">
							<view class="category-box" @tap="onCategory(item, index)">
								<view class="category-name">{{item.name}}</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-y class="scroll-box" enable-back-to-top scroll-with-animation>
						<view class="right" v-if="list.length > 0">
							<view class="item-list">
								<view class="item-box x-f" v-for="(item, index) in list" :key="index"  @tap="jump(`/pages/home/goodsDetail/goodsDetail?id=${item.id}&img=${item.attachs}&hbzj=${item.cnyprice}&hbzjsz=${item.ydysprice}`)">
									<view class="y-f goods-item">
										<image class="item-img" lazy-load :src="item.attachs" mode="aspectFill"></image>
										<view class="item-title one-t ">{{item.name}}</view>
										<view class="price-box">
											<view class="sales miso-font">销量{{ zhuan(item.sales) }}件</view>
											<view v-if="item.categoryId == 'A1201'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1202'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1203'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1204'" class="current">
												{{ item.memberPrice}}
											</view>
											<view v-if="item.categoryId == 'A1202' || item.categoryId == 'A1203' || item.categoryId == 'A1204'" class="current" style="font-size: 12px; color: #ccc;">
												<span style="text-decoration:line-through; ">{{item.marketPrice}}</span>
											</view>
											<view class="goods-money" style="display: flex; align-items: center; margin-left: -8rpx;">
												<view class="icon-money">￥</view>
												{{item.ismember ? item.ydysmemberPrice : item.ydysmarketPrice}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="padding: 80rpx 0;" v-if="list.length < 1">
							<empty></empty>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="foot_box"></view>
		</view>
	</block>
</template>
<script>
	export default {
		data() {
			return {
				effective: '',
				searchVal: '',
				categorys: [],
				current: 0,
				cateGoods: [],
				q: {
					categoryId: '',
					page: 1,
					page_num: 20,
					type:2
				},
				isLoading: true,
				hasMore: true,
				loadStatus: '',
				list: []
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(){
				const userId = uni.getStorageSync('uid');
				const token = uni.getStorageSync('token');
				let params = {
					_token: token,
					userId: userId,
					type: '1',
				}
				this.$api.myInfor(params).then(res => {
					if (res.ok&&res.data) {
						this.effective = res.data.effective
					}
				});
				this.$api.getClassify().then(res => {
					if(res.ok&&res.data.length>0){
						this.categorys = res.data;
						this.q.categoryId = this.categorys[0].id;
						this.getList();
					}
				})
			},
			getList() {
				this.isLoading = true;
				this.$api.getClassifyShops(this.q).then(res => {
					this.isLoading = false;
					this.list = res.data.list;
					if (this.list.length != 0) {
						this.hasMore = true;
						this.loadStatus = '';
					} else {
						this.hasMore = false;
						this.loadStatus = 'over';
					}
				});
			},
			zhuan(num) {
				var that = this;
				if (num / 10000 > 1) {
					return (num / 10000).toFixed(2) + '万';
				} else {
					return num;
				}
			},
			onCategory(item, index) {
				if((!this.effective||!uni.getStorageSync('effective'))&&item.id==='A1202') {
					Tool.msg('您不是VIP会员，请先购买分套餐专区成为会员后再访问！')
					return
				}else{
					this.current = index;
					this.q.categoryId = item.id;
					this.list = [];
					this.q.page = 1;
					this.getList();
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content_box {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.category-name{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12rpx;
	}
	.wrapper-box {
		flex: 1;
		height: 100%;
	}
	.scroll-box {
		height: 100%;
		flex: 1;
		background: #fff;
	}
	.left {
		width: 160upx;
		height: 100%;
		.list-active {
			background: #fff;
			color: #333333 !important;
			font-weight: bold !important;
		}
		.line-active {
			background: $zhuse;
		}
		.type-list {
			height: 84upx;
			position: relative;
			width: 160upx;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			.linec {
				width: 10upx;
				height: 100%;
				position: absolute;
				left: 0;
			}
		}
	}
	.right {
		padding: 0 20upx;
		flex: 1;
		height: 100%;
		.type-img {
			width: 505rpx;
			height: 150rpx;
			background: #ccc;
			margin-top: 30rpx;
		}
		.item-list {
			display: flex;
			flex-wrap: wrap;
			.type-box {
				height: 84rpx;
				.type-title {
					font-size: 28rpx;
					font-weight: bold;
				}
				.more {
					font-size: 26rpx;
					color: #999;
				}
			}
			.item-box {
				flex-wrap: wrap;
				.goods-item {
					margin:20rpx 10rpx;
					&:nth-child(3n) {
						margin-right: 0;
					}
					.item-img {
						width: 210rpx;
						height: 210rpx;
						margin: 0 45rpx 0px 0;
						margin-top: 10rpx;
					}
					.item-title {
						width: 210rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						margin-top: 10rpx;
						text-align: left;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
	.price-box {
		margin-top: 30rpx;
		margin-left: -50rpx;
		.sales {
			font-size: 12rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 20rpx;
			margin-left: -10rpx;
			margin-bottom: 20rpx;
		}
		.current {
			font-size: 30rpx;
			font-weight: 500;
			color: $fuse;
			line-height: 30rpx;
			margin-left: -10rpx;
			margin-bottom: 20rpx;
			&:before {
				content: '￥';
				font-size: 26rpx;
			}
		}
		.original {
			font-size: 22rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: rgba(153, 153, 153, 1);
			margin-left: 14rpx;
			line-height: 22rpx;
			margin-bottom: 10rpx;
	
			&:before {
				content: '￥';
				font-size: 20rpx;
			}
		}
		.tag-box {
			.discount {
				line-height: 28rpx;
				border: 1rpx solid rgba(225, 33, 43, 1);
				border-radius: 8rpx;
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(225, 33, 43, 1);
				padding: 0 8rpx;
				margin-right: 10rpx;
			}
		}
	}
	.goods-money {
		font-size: 13px;
		font-weight: 500;
		color: #00c2ff;
		line-height: 13px;
		margin-bottom: 8px;
	}
	.icon-money {
		width: 15px;
		border: 1px solid;
		border-radius: 100%;
		height: 15px;
		/* line-height: 12px; */
		text-align: center;
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.topPlace {
		width: 100%;
		height: var(--status-bar-height);
		background: $zhuse;
	}
	.place {
		width: 100%;
		height: 40upx;
		background: $zhuse;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		.top {
			width: 100%;
			padding: 18upx 20upx 22upx;
			background: $zhuse;
			// #ifdef MP-WEIXIN
			padding-right: 28%;
			// #endif
		}
		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.l {
				flex: 1;
				margin-right: 20upx;
				border-radius: 30upx;
				padding: 0 30upx;
				height: 60upx;
				background: #FFFFFF;
				background: rgba(255, 255, 255, .24);
				// opacity: 0.24;
				display: flex;
				align-items: center;
				image {
					width: 32upx;
					height: 32upx;
				}
				text {
					font-size: 28upx;
					color: #ffffff;
					margin-left: 10upx;
				}
				input {
					height: 100%;
					color: #ffffff;
					margin-left: 20upx;
					flex: 1;
				}
				.uni-input-placeholder {
					color: #FFFFFF;
				}
			}
			.r {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				image {
					width: 50upx;
					height: 50upx;
					display: block;
					// margin-bottom: 6upx;
				}
				text {
					font-size: 16upx;
					color: #fff;
					display: block;
				}
			}
		}

		position: relative;
		// padding-top: 10px;
		.bot {
			position: relative;
		}
		.titleNview-placing {
			position: absolute;
			height: 57%;
			background: linear-gradient(180deg, rgba(49, 139, 242, 1) 0%, rgba(57, 162, 242, 0.3) 100%) !important;
			width: 100%;
			border-bottom-left-radius: 13px;
			border-bottom-right-radius: 13px;
		}
		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: 0.4s;
		}
	}
</style>
